<template>
  <div class="manual-container">
    <el-card shadow="hover" class="manual-card">
      <template #header>
        <div class="card-header">
          <h1>用户手册</h1>
          <div class="header-actions">
            <el-button @click="printManual">
              <el-icon><Printer /></el-icon>
              打印
            </el-button>
            <el-button @click="downloadPdf">
              <el-icon><Download /></el-icon>
              下载PDF
            </el-button>
          </div>
        </div>
      </template>
      
      <div class="manual-content">
        <el-row :gutter="20">
          <!-- 左侧目录 -->
          <el-col :span="6">
            <el-affix :offset="80">
              <div class="manual-menu">
                <el-input
                  placeholder="搜索手册内容"
                  v-model="searchKeyword"
                  clearable
                  @input="filterChapters"
                >
                  <template #prefix>
                    <el-icon><Search /></el-icon>
                  </template>
                </el-input>
                
                <el-menu
                  :default-active="currentSection"
                  class="manual-nav"
                  @select="handleSelect">
                  <template v-for="chapter in filteredChapters" :key="chapter.id">
                    <el-sub-menu v-if="chapter.sections && chapter.sections.length" :index="chapter.id">
                      <template #title>
                        <el-icon><Document /></el-icon>
                        <span>{{ chapter.title }}</span>
                      </template>
                      <el-menu-item
                        v-for="section in chapter.sections"
                        :key="section.id"
                        :index="section.id">
                        {{ section.title }}
                      </el-menu-item>
                    </el-sub-menu>
                    
                    <el-menu-item v-else :index="chapter.id">
                      <el-icon><Document /></el-icon>
                      <template #title>{{ chapter.title }}</template>
                    </el-menu-item>
                  </template>
                </el-menu>
              </div>
            </el-affix>
          </el-col>
          
          <!-- 右侧内容 -->
          <el-col :span="18">
            <div class="manual-article" id="manual-article">
              <!-- 引言 -->
              <div id="introduction" class="manual-section">
                <h2>引言</h2>
                <p>欢迎使用通用后台管理系统！本手册将指导您如何使用系统的各项功能，帮助您快速上手。</p>
                <p>通用后台管理系统是一个功能强大的企业级管理平台，提供用户管理、角色权限管理、系统监控、数据可视化等多种功能。</p>
              </div>
              
              <!-- 快速入门 -->
              <div id="quick-start" class="manual-section">
                <h2>快速入门</h2>
                <h3>登录系统</h3>
                <p>访问系统登录页面，输入您的用户名和密码进行登录。如果您是首次登录，可能需要修改初始密码。</p>
                <div class="manual-image-container">
                  <div class="placeholder-image">登录页面图示</div>
                  <div class="image-caption">登录页面</div>
                </div>
                
                <h3>主界面介绍</h3>
                <p>成功登录后，您将看到系统的主界面，包括以下几个部分：</p>
                <ul>
                  <li><strong>顶部栏</strong>：显示系统名称、通知消息、用户信息等</li>
                  <li><strong>侧边菜单</strong>：用于导航系统的各个功能模块</li>
                  <li><strong>内容区域</strong>：显示当前选择的功能页面</li>
                  <li><strong>页脚区域</strong>：显示系统版权信息等</li>
                </ul>
                <div class="manual-image-container">
                  <div class="placeholder-image">系统主界面图示</div>
                  <div class="image-caption">系统主界面</div>
                </div>
              </div>
              
              <!-- 用户管理 -->
              <div id="user-management" class="manual-section">
                <h2>用户管理</h2>
                <p>系统管理员可以通过用户管理模块创建、修改、删除用户账号，并分配相应的角色和权限。</p>
                
                <h3>用户列表</h3>
                <p>用户列表页面显示系统中所有的用户账号，包括用户名、状态、创建时间等信息。您可以通过顶部的搜索框按用户名、邮箱等条件搜索用户。</p>
                
                <h3>创建用户</h3>
                <p>点击用户列表页面的"新增"按钮，填写用户信息表单：</p>
                <ol>
                  <li>填写基本信息：用户名、密码、姓名、邮箱等</li>
                  <li>选择所属部门</li>
                  <li>分配角色</li>
                  <li>设置用户状态（启用/禁用）</li>
                </ol>
                <div class="manual-image-container">
                  <div class="placeholder-image">创建用户表单图示</div>
                  <div class="image-caption">创建用户表单</div>
                </div>
                
                <h3>修改用户</h3>
                <p>在用户列表中点击"编辑"按钮，可以修改用户的基本信息、部门、角色等。注意，用户名通常不允许修改。</p>
                
                <h3>删除用户</h3>
                <p>在用户列表中点击"删除"按钮，可以删除用户账号。删除操作不可恢复，请谨慎操作。</p>
                
                <h3>重置密码</h3>
                <p>在用户列表中点击"重置密码"按钮，可以将用户密码重置为系统默认密码。重置后，用户需要在下次登录时修改密码。</p>
              </div>
              
              <!-- 角色权限 -->
              <div id="role-permission" class="manual-section">
                <h2>角色权限管理</h2>
                <p>角色权限管理是系统安全的重要组成部分，通过角色划分和权限分配，可以有效控制用户对系统功能的访问权限。</p>
                
                <h3>角色管理</h3>
                <p>角色是权限的集合，系统预设了几种常用角色：</p>
                <ul>
                  <li><strong>超级管理员</strong>：拥有系统所有权限</li>
                  <li><strong>管理员</strong>：拥有除系统设置外的所有功能权限</li>
                  <li><strong>普通用户</strong>：只拥有基本的业务功能权限</li>
                  <li><strong>访客</strong>：只有查看权限，不能进行任何修改操作</li>
                </ul>
                
                <p>您可以根据实际需求创建自定义角色。创建角色时，需要设置角色名称、角色编码、备注等基本信息，然后分配对应的权限。</p>
                
                <h3>权限分配</h3>
                <p>在角色管理页面，点击"权限分配"按钮，可以为角色配置具体的权限：</p>
                <ul>
                  <li><strong>菜单权限</strong>：控制用户能够看到哪些菜单</li>
                  <li><strong>操作权限</strong>：控制用户能否执行特定操作，如新增、修改、删除等</li>
                  <li><strong>数据权限</strong>：控制用户能够访问哪些数据范围</li>
                </ul>
                <div class="manual-image-container">
                  <div class="placeholder-image">角色权限分配界面图示</div>
                  <div class="image-caption">角色权限分配界面</div>
                </div>
              </div>
              
              <!-- 系统监控 -->
              <div id="system-monitor" class="manual-section">
                <h2>系统监控</h2>
                <p>系统监控模块提供多种工具，帮助管理员实时了解系统运行状态，及时发现并解决问题。</p>
                
                <h3>服务器监控</h3>
                <p>服务器监控页面显示服务器的实时性能指标，包括：</p>
                <ul>
                  <li>CPU使用率</li>
                  <li>内存使用情况</li>
                  <li>磁盘使用情况</li>
                  <li>网络流量</li>
                  <li>JVM内存使用情况</li>
                </ul>
                <div class="manual-image-container">
                  <div class="placeholder-image">服务器监控界面图示</div>
                  <div class="image-caption">服务器监控界面</div>
                </div>
                
                <h3>日志管理</h3>
                <p>日志管理包括操作日志和登录日志两部分：</p>
                <ul>
                  <li><strong>操作日志</strong>：记录用户的重要操作，包括操作类型、操作内容、操作时间、操作结果等</li>
                  <li><strong>登录日志</strong>：记录用户的登录情况，包括登录时间、登录IP、登录结果等</li>
                </ul>
                
                <h3>定时任务</h3>
                <p>定时任务管理页面可以创建、修改、删除系统定时任务。定时任务用于执行定期的系统维护工作，如数据备份、缓存清理等。</p>
                <p>创建定时任务时，需要设置任务名称、任务分组、执行类、执行方法、执行参数、Cron表达式等信息。</p>
              </div>
              
              <!-- 常见问题 -->
              <div id="faq" class="manual-section">
                <h2>常见问题解答</h2>
                
                <div class="faq-item">
                  <h3>Q: 忘记密码怎么办？</h3>
                  <p>A: 如果您忘记密码，请联系系统管理员重置密码。管理员可以在用户管理页面为您重置密码。</p>
                </div>
                
                <div class="faq-item">
                  <h3>Q: 如何更改个人资料？</h3>
                  <p>A: 点击顶部栏的用户头像，选择"个人中心"，可以修改您的个人资料、更改密码等。</p>
                </div>
                
                <div class="faq-item">
                  <h3>Q: 为什么我看不到某些菜单？</h3>
                  <p>A: 系统根据您的角色权限显示菜单。如果您没有某些菜单的访问权限，这些菜单将不会显示。如需要，请联系系统管理员调整您的角色权限。</p>
                </div>
                
                <div class="faq-item">
                  <h3>Q: 系统支持哪些浏览器？</h3>
                  <p>A: 系统兼容大多数现代浏览器，包括Chrome、Firefox、Edge、Safari等。为获得最佳体验，建议使用最新版本的Chrome或Firefox浏览器。</p>
                </div>
                
                <div class="faq-item">
                  <h3>Q: 如何导出数据？</h3>
                  <p>A: 在大多数数据列表页面，您可以找到"导出"按钮。点击该按钮可以将当前数据导出为Excel或CSV格式的文件。</p>
                </div>
              </div>
              
              <!-- 联系支持 -->
              <div id="support" class="manual-section">
                <h2>联系支持</h2>
                <p>如果您在使用过程中遇到问题，可以通过以下方式获取帮助：</p>
                <ul>
                  <li>系统内部反馈：点击右下角的"帮助"图标，填写问题反馈表单</li>
                  <li>电子邮件：support@example.com</li>
                  <li>电话支持：400-123-4567（工作日 9:00-18:00）</li>
                </ul>
                <p>请在反馈问题时提供详细的问题描述、操作步骤和截图，这将有助于我们更快地解决您的问题。</p>
              </div>
              
              <!-- 版本更新 -->
              <div id="version-history" class="manual-section">
                <h2>版本更新历史</h2>
                <div class="version-item">
                  <h3>v1.2.0 (2023-05-15)</h3>
                  <ul>
                    <li>新增数据可视化大屏</li>
                    <li>优化用户体验，提升页面加载速度</li>
                    <li>修复已知bug</li>
                  </ul>
                </div>
                
                <div class="version-item">
                  <h3>v1.1.0 (2023-03-20)</h3>
                  <ul>
                    <li>新增文件管理模块</li>
                    <li>增强系统安全性，增加二次验证功能</li>
                    <li>优化移动端适配</li>
                  </ul>
                </div>
                
                <div class="version-item">
                  <h3>v1.0.0 (2023-01-10)</h3>
                  <ul>
                    <li>系统正式发布</li>
                    <li>基础功能完成，包括用户管理、角色权限、系统监控等</li>
                  </ul>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script>
import { Document, Search, Download, Printer } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { defineComponent, ref, onMounted, onBeforeUnmount } from 'vue'

export default defineComponent({
  name: 'UserManual',
  setup() {
    const searchKeyword = ref('')
    const currentSection = ref('introduction')
    const chapters = [
      {
        id: 'introduction',
        title: '引言',
        sections: []
      },
      {
        id: 'quick-start',
        title: '快速入门',
        sections: [
          { id: 'quick-start-login', title: '登录系统' },
          { id: 'quick-start-interface', title: '主界面介绍' }
        ]
      },
      {
        id: 'user-management',
        title: '用户管理',
        sections: [
          { id: 'user-list', title: '用户列表' },
          { id: 'user-create', title: '创建用户' },
          { id: 'user-edit', title: '修改用户' },
          { id: 'user-delete', title: '删除用户' },
          { id: 'user-reset-password', title: '重置密码' }
        ]
      },
      {
        id: 'role-permission',
        title: '角色权限管理',
        sections: [
          { id: 'role-management', title: '角色管理' },
          { id: 'permission-assignment', title: '权限分配' }
        ]
      },
      {
        id: 'system-monitor',
        title: '系统监控',
        sections: [
          { id: 'server-monitor', title: '服务器监控' },
          { id: 'log-management', title: '日志管理' },
          { id: 'scheduled-tasks', title: '定时任务' }
        ]
      },
      {
        id: 'faq',
        title: '常见问题解答',
        sections: []
      },
      {
        id: 'support',
        title: '联系支持',
        sections: []
      },
      {
        id: 'version-history',
        title: '版本更新历史',
        sections: []
      }
    ]
    const filteredChapters = ref([...chapters])
    
    // 搜索过滤章节
    const filterChapters = () => {
      if (!searchKeyword.value) {
        filteredChapters.value = [...chapters]
        return
      }
      
      const keyword = searchKeyword.value.toLowerCase()
      
      // 过滤包含关键字的章节和节
      filteredChapters.value = chapters.filter(chapter => {
        const titleMatch = chapter.title.toLowerCase().includes(keyword)
        
        // 过滤匹配的节
        const matchedSections = chapter.sections?.filter(
          section => section.title.toLowerCase().includes(keyword)
        ) || []
        
        // 如果标题匹配或有匹配的节，则保留此章节
        return titleMatch || matchedSections.length > 0
      }).map(chapter => {
        // 如果没有节，或者标题已匹配，则返回整个章节
        if (!chapter.sections || !chapter.sections.length || 
            chapter.title.toLowerCase().includes(keyword)) {
          return chapter
        }
        
        // 否则只保留匹配的节
        return {
          ...chapter,
          sections: chapter.sections.filter(
            section => section.title.toLowerCase().includes(keyword)
          )
        }
      })
    }
    
    // 处理菜单选择
    const handleSelect = (index) => {
      currentSection.value = index
      
      // 如果选择的是节(有父章节)，需要找到正确的ID
      let targetId = index
      for (const chapter of chapters) {
        const section = chapter.sections?.find(s => s.id === index)
        if (section) {
          targetId = chapter.id
          break
        }
      }
      
      // 滚动到对应的内容区域
      const element = document.getElementById(targetId)
      if (element) {
        element.scrollIntoView({ behavior: 'smooth', block: 'start' })
      }
    }
    
    // 处理页面滚动，更新当前选中的菜单项
    const handleScroll = () => {
      const sections = document.querySelectorAll('.manual-section')
      if (!sections.length) return
      
      // 找到当前在视口中的第一个章节
      for (const section of sections) {
        const rect = section.getBoundingClientRect()
        if (rect.top >= 0 && rect.top <= window.innerHeight / 2) {
          currentSection.value = section.id
          break
        }
      }
    }
    
    // 打印手册
    const printManual = () => {
      window.print()
    }
    
    // 下载PDF
    const downloadPdf = () => {
      // 在实际项目中，这里应该调用生成PDF的服务
      // 这里模拟一个下载操作
      ElMessage.success('PDF生成中，请稍候...')
      setTimeout(() => {
        ElMessage.success('PDF已生成，开始下载')
        // 模拟下载
        const link = document.createElement('a')
        link.href = '#'
        link.download = '用户手册.pdf'
        link.click()
      }, 2000)
    }
    
    // 监听页面滚动，更新当前节点
    onMounted(() => {
      window.addEventListener('scroll', handleScroll)
    })
    
    onBeforeUnmount(() => {
      window.removeEventListener('scroll', handleScroll)
    })
    
    return {
      searchKeyword,
      currentSection,
      filteredChapters,
      handleSelect,
      filterChapters,
      printManual,
      downloadPdf,
      // 图标
      Document,
      Search,
      Download,
      Printer
    }
  }
})
</script>

<style scoped>
.manual-container {
  padding: 20px;
}

.manual-card {
  min-height: calc(100vh - 200px);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header h1 {
  margin: 0;
  font-size: 20px;
  font-weight: 500;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.manual-content {
  margin-top: 20px;
}

.manual-menu {
  border-right: 1px solid #f0f0f0;
  height: calc(100vh - 300px);
  overflow-y: auto;
}

.manual-nav {
  margin-top: 20px;
  border-right: none;
}

.manual-article {
  padding: 0 20px 50px;
}

.manual-section {
  margin-bottom: 40px;
  scroll-margin-top: 80px;
}

.manual-section h2 {
  font-size: 24px;
  font-weight: 500;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f0f0f0;
}

.manual-section h3 {
  font-size: 18px;
  font-weight: 500;
  margin: 20px 0 15px;
}

.manual-section p {
  margin-bottom: 15px;
  line-height: 1.6;
}

.manual-section ul, 
.manual-section ol {
  padding-left: 20px;
  margin-bottom: 15px;
}

.manual-section li {
  margin-bottom: 8px;
  line-height: 1.6;
}

.manual-image-container {
  margin: 20px 0;
  text-align: center;
}

.manual-image {
  max-width: 100%;
  border: 1px solid #ebeef5;
  border-radius: 4px;
}

.image-caption {
  color: #909399;
  font-size: 14px;
  margin-top: 10px;
}

.faq-item {
  margin-bottom: 20px;
}

.faq-item h3 {
  font-weight: 500;
  color: #303133;
}

.version-item {
  margin-bottom: 20px;
}

.version-item h3 {
  font-weight: 500;
}

/* 添加占位图样式 */
.placeholder-image {
  background-color: #f5f7fa;
  border: 1px dashed #dcdfe6;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 300px;
  width: 100%;
  color: #909399;
  font-size: 16px;
}

/* 打印样式 */
@media print {
  .manual-menu,
  .header-actions,
  .el-card__header {
    display: none;
  }
  
  .manual-content > .el-row > .el-col:first-child {
    display: none;
  }
  
  .manual-content > .el-row > .el-col:last-child {
    width: 100%;
  }
  
  .manual-section {
    page-break-inside: avoid;
  }
}
</style> 